<template>
  <div>
    <div class="block text-center" m="t-4">
      <el-carousel trigger="click">
        <el-carousel-item v-for="item in arr" :key="item.id">
          <img :src="'http://101.132.181.9:3000/' + item.imgPath" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="main1">
      <p>手机</p>
      <div class="main_item">
        <div class="main1_1">
          <img
            src="http://101.132.181.9:3000/public/imgs/phone/phone.png"
            alt=""
          />
        </div>
        <div class="main1_2">
          <ul>
            <li
              v-for="(ite, index) in phone"
              :key="index"
              @click="goTo(ite.product_id)"
            >
              <img
                :src="'http://101.132.181.9:3000/' + ite.product_picture"
                alt=""
              />
              <p>{{ ite.product_name }}</p>
              <p class="pTwo">{{ ite.product_title }}</p>
              <p class="pThree">{{ ite.product_price }} 元</p>
            </li>
            <li class="li">浏览更多 》</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="main1">
      <p>家电</p>
      <div class="main_item">
        <div class="main2">
          <ul>
            <li>
              <img
                src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo1.png"
                alt=""
              />
            </li>
            <li>
              <img
                src="http://101.132.181.9:3000/public/imgs/appliance/appliance-promo1.png"
                alt=""
              />
            </li>
          </ul>
        </div>
        <div class="main1_2">
          <ul>
            <li
              v-for="item in eleCtr"
              :key="item.id"
              @click="goTo(item.product_id)"
            >
              <img
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                alt=""
              />
              <p>{{ item.product_name }}</p>
              <p class="pTwo">{{ item.product_title }}</p>
              <p class="pThree">{{ item.product_price }} 元</p>
            </li>
            <li class="li">浏览更多 》</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="main1">
      <p>配件</p>
      <div class="main_item">
        <div class="main2">
          <ul class="ul1">
            <li>
              <img
                src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo1.png"
                alt=""
              />
            </li>
            <li>
              <img
                src="http://101.132.181.9:3000/public/imgs/accessory/accessory-promo2.png"
                alt=""
              />
            </li>
          </ul>
        </div>
        <div class="main1_2">
          <ul>
            <li
              v-for="item in part"
              :key="item.id"
              @click="goTo(item.product_id)"
            >
              <img
                :src="'http://101.132.181.9:3000/' + item.product_picture"
                alt=""
              />
              <p>{{ item.product_name }}</p>
              <p class="pTwo">{{ item.product_title }}</p>
              <p class="pThree">{{ item.product_price }} 元</p>
            </li>
            <li class="li">浏览更多 》</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { carousel, getPhone, getElectricAppliance, getParts } from "../api/api";
export default {
  data() {
    return {
      // list: []'
      arr: [],
      obj: [],
      phone: [],
      eleCtr: [],
      part: [],
    };
  },
  created() {
    this.getList();
    this.getPhoneHome();
    this.getElectric();
    this.getHomeParts();
  },
  methods: {
    // 跳转详情
    goTo(v) {
      console.log(v, "v");
      this.$router.push({
        name: "details",
        params: {
          productID: v,
        },
      });
      // this.$router.push({
      //    path:"/goods/details",
      //    query:{
      //      productID:v
      //    }
      // })
      //  this.$router.push("/goods/details?productID="+v)
    },
    // 家电
    async getHomeParts() {
      let al = ["保护套", "保护膜", "充电器", "充电宝"];
      let res = await getParts(al);
      console.log(res, "parts");
      if (res.code == "001") {
        this.part = res.Product;
      }
    },
    // 家电
    async getElectric() {
      let al = ["电视机", "空调", "洗衣机"];
      let res = await getElectricAppliance(al);
      console.log(res, "electric");
      if (res.code == "001") {
        this.eleCtr = res.Product;
      }
    },
    // 手机
    async getPhoneHome() {
      let res = await getPhone();
      console.log(res, "getPhone");
      if (res.code == "001") {
        this.phone = res.Product;
      }
    },
    // 渲染轮播图
    async getList() {
      let res = await carousel();
      console.log(res, "Res");
      if (res.code == "001") {
        this.arr = res.carousel;
      }
    },
  },
};
</script>

<style scoped>
.ul1 li img {
  width: 100%;
  height: 100%;
}
.pTwo {
  font-size: 10px;
  color: #ddd;
}
.pThree {
  color: rgb(215, 0, 0);
}
.li {
  text-align: center;
  line-height: 300px;
}
.main1 {
  width: 90%;
  margin: auto;
}
.main1 p:nth-child(1) {
  width: 100%;
  height: 75px;
  line-height: 75px;
  font-size: 20px;
}
.main1 .main_item {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.main1 .main_item .main2 {
  width: 20%;
  height: 610px;
}
.main1 .main_item .main2 ul {
  width: 100%;
  height: 100px;
}
.main1 .main_item .main2 ul li {
  height: 300px;
  background-color: #fff;
  margin-left: 10px;
  text-align: center;
}
/* .main1 .main_item .main2 ul li img {
  width: 100%;
  height: 200px;
} */
.main1 .main_item .main2 ul li:nth-child(2) {
  margin-top: 10px;
}
.main1 .main_item .main1_1 {
  width: 20%;
  height: 610px;
  background-color: antiquewhite;
}
.main1 .main_item .main1_1 img {
  width: 100%;
  height: 100%;
}
.main1 .main_item .main1_2 {
  width: 80%;
  height: 610px;
  box-sizing: border-box;
}
.main1 .main_item .main1_2 ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
}
.main1_2 ul li {
  width: 23%;
  height: 300px;
  background-color: #fff;
  margin-left: 10px;
  text-align: center;
  font-size: 15px;
  overflow: hidden;
}
.main1_2 ul li img {
  width: 100%;
  height: 215px;
}

.main1 .main_item .main2 div,
li:hover {
  box-shadow: 10px 0px 10px 0 #d2d2d2;
  transform: translate(-1%, -1%);
}
.block {
  width: 100%;
  margin: auto;
  background-color: #fff;
}
.el-carousel {
  width: 90%;
  margin: auto;
  height: 460px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
.el-carousel__item {
  width: 100%;
  height: 460px;
}
</style>